<template>
    <div style="line-height: 60px; display: flex">
        <div class="left">
            <span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px" @click="collapse"></span>
            <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
                <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
                <template v-for="(item,index) in breadcrumb">
                    <el-breadcrumb-item :key="index" v-if="item.path" :to="{ path: item.path}">
                        {{ item.name }}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item :key="index" v-else>
                        {{ item.name }}
                    </el-breadcrumb-item>
                </template>

            </el-breadcrumb>
        </div>
        <el-dropdown @command="handleCommand" class="right">
            <div style="display: inline-block">

                <img  alt="" @click="toPerson"
                     style="width: 40px; border-radius: 50%; position: relative; top: 10px; right: 5px;cursor: pointer" size="large" :src="user.avatarUrl"   >
                <span style="cursor: pointer">{{ user.nickname }}<i class="el-icon-arrow-down"
                                                                    style="margin-left: 5px;"></i></span>
            </div>
            <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
                <el-dropdown-item command="toPerson" style="font-size: 14px; padding: 5px 0">
                    <span style="display:inline-block;width:100%;text-decoration: none;">个人信息</span>
                </el-dropdown-item>
                <el-dropdown-item command="toEditPassword" style="font-size: 14px; padding: 5px 0">
                    <span style="display:inline-block;width:100%;text-decoration: none">修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item command="signOut" style="font-size: 14px; padding: 5px 0">
                    <span style="display:inline-block;width:100%;text-decoration: none">退出</span>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    import {logout} from '@/api/login'
    import ElementUI from "element-ui";
    import router from "@/router";

    export default {
        components: {},
        props: {
            collapseBtnClass: String,
        },
        data() {
            //这里存放数据
            return {
                breadMenu : [],
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
                nowMenuName: this.$route.matched[this.$route.matched.length - 1].name
            };
        },
        //监听属性 类似于data概念
        computed: {
            // 面包屑数据
            breadcrumb() {
                this.breadMenu = []
                this.nowMenuName = this.$route.matched[this.$route.matched.length - 1].name
                //当前点击的菜单
                let matchedArr = this.$route.matched.filter((item) => {
                    return item.path !== "" && item.path !== '/home'
                })
                let menus = JSON.parse(localStorage.getItem("menus"))
                if (matchedArr.length <= 0) {
                    return matchedArr;
                }
                this.getBreadMenu(menus)
                this.breadMenu.forEach(item => {
                    matchedArr.unshift(item)
                })
               // console.log("当前所有的嵌套路由", matchedArr)
                return matchedArr;
            },
        },
        //方法集合
        methods: {
            getBreadMenu(menus) {
                if (menus.length <= 0) {
                    return false
                }
                let flag = false
                for (let i = 0; i < menus.length; i++) {
                    let item = menus[i]

                    flag = this.getBreadMenu(item.children)

                    if (flag && (item.menuType === 'M')) {
                        item.path = ''
                        this.breadMenu.push(item)
                        flag = true
                        return flag
                    }
                    if (item.name === this.nowMenuName) {
                        flag = true
                        return flag
                    }
                }
            },
            handleCommand(command) {
                if (command === "signOut") {
                    logout()
                } else if (command === "toPerson") {
                    this.$router.replace('/person')
                } else if (command === "toEditPassword") {
                    this.$router.replace('/password')
                }
            },
            toPerson() {
                this.$router.replace('/person')
            },
            collapse() {
                this.$emit("collapse")
            },
        },
        //监控data中的数据变化
        watch: {
            '$store.state.avatarUrl'(newVal, oldVal) {
                console.log("更新图片成功")
                this.user.avatarUrl = newVal
            },
        },
        created() {
            if(this.user.avatarUrl===''||this.user.avatarUrl===null){
                this.user.avatarUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            }
        }
    };
</script>
<style scoped>
    .left {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
    }

    .right {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        margin-left: auto;
    }
</style>
